<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/animate.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 520px;
            height: 280px;
            margin: 100px auto;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
        }

        .swiper {
            width: 2600px;
            height: 280px;
            overflow: hidden;
            position: absolute;
            left: 0;
        }

        .swiper li {
            float: left;
        }

        .swiperMenu {
            position: absolute;
            right: 20px;
            bottom: 10px;
            padding: 5px 10px;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 13px;
        }

        .swiperMenu li {
            float: left;
            width: 18px;
            height: 18px;
            margin: 0 5px;
            border-radius: 50%;
            background-image: url(images/icons.png);
            background-position: -855px -790px;
        }

        .swiperMenu .active {
            background-image: url(images/icons.png);
            background-position: -855px -727px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="swiper">
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/01.jpg" alt=""></li>
        </ul>
        <ul class="swiperMenu">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    var swiper = document.querySelector(".swiper");
    var wrap = document.querySelector(".wrap");
    var liList = document.querySelectorAll(".swiperMenu li");

    var index = 0;
    var timer = null;

    // animate(swiper, "left", "-1560px", "linear");
    // autoPlay()
    // function autoPlay() {
    //     timer = setTimeout(function () {
    //         index++;
    //         console.log(index);
    //         animate(swiper, "left", -520 * index, "linear", function () {
    //             if (index == 4) {

    //             }
    //             autoPlay();
    //         });
    //     }, 2000)
    // }

    autoPlay();

    wrap.onmouseover = function () {
        clearTimeout(timer);
    }
    wrap.onmouseout = function () {
        autoPlay();
    }


    for (let i = 0; i < liList.length; i++) {
        let li = liList[i];
        li.onclick = function () {
            index = i;
            for (var j = 0; j < liList.length; j++) {
                liList[j].className = "";
            }
            liList[i].className = "active";
            animate(swiper, "left", -520 * i, "linear");
        }
    }


    function autoPlay() {
        timer = setTimeout(function () {
            index++;

            for (var j = 0; j < liList.length; j++) {
                liList[j].className = "";
            }
            liList[index == 4 ? 0 : index].className = "active";

            console.log(index);
            animate(swiper, "left", -520 * index, "linear", function () {
                if (index == 4) {  //第四张切第五张以后
                    index = 0;
                    swiper.style.left = 0;
                }
                autoPlay();
            })
        }, 3000)
    }
</script>

</html>